<template>
  <div class="order-detail-goods">
    <div class="item-block" v-if="detailAll.is_delivery_supplier>1 && detail.delivery_supplier.length>1">
      <ul class="tabs">
        <li v-for="(item,index) in detail.delivery_supplier" :key="index" :class="detailAll.supid==item[0]?'active':''" @click="clickTab(detail.order_id,item,index)">包裹{{index+1}}</li>
      </ul>
    </div>

    <div class="item-block goods-container">
      <!-- 小程序段暂时隐藏交易快照 -->
      <div class="title" v-if="detail.is_transaction_snapshot==1">点击商品查看交易快照</div>
      <ul class="order-goods" v-if="detail.store_gathering_id!=0">
        <li class="goods-li">
          <section class="order-goods-img">
            <a href="javascript:;">
              <img src="https://img.wifenxiao.com/h5-wfx/images/order/money.png" width="80" height="80" />
            </a>
          </section>
          <section class="order-goods-infor g-flex">
            <div class="left">
              <a href="javascript:;" class="goods-title">门店收款码订单</a>
              <p class="price fl" v-if="detail.pay_type && detail.pay_type==5">&dollar; <em>{{detail.payment}}</em>}</p>
              <span class="price" v-else v-html="scaleGoodsPriceFn(detail.payment)"></span>
            </div>
          </section>
        </li>
      </ul>
      <ul class="order-goods" v-for="(goodsLi,index) in detail.item" :key="index">
        <section class="gys_info" v-if="goodsLi.gys_id && goodsLi.gys_id > 0">
          <img class="gys_logo" :src="goodsLi.gys_logo || defaultAvatar" alt />
          <span>{{goodsLi.gys_name}}</span>
          <img class="arrow" src="https://img.wifenxiao.com/h5-wfx/images/arrow_R.png" alt="">
        </section>
        <li v-for="(goods,index) in goodsLi.list"
            :key="index"
            class="goods-li"
            @click="goodsLink(goods)">
          <section class="order-goods-img">
            <a href="javascript:;">
              <img :src="goods.pic_url+'160x160'" width="80" height="80" v-if="goods.is_compress==1"/>
              <img :src="goods.pic_url" width="80" height="80" v-else/>
            </a>
          </section>
          <section class="order-goods-infor g-flex">
            <div class="left">
              <a href="javascript:;" class="goods-title">{{goods.title}}</a>
              <div class="item-tips-box">
                <span class="item-tips fontBaos icon_bssp" v-if="detailAll.is_open_kuajing==1 && goods.item_config.kuajing_type==1">保税商品</span>
                <span class="item-tips icon_hwzy" v-else-if="detailAll.is_open_kuajing==1 && goods.item_config.kuajing_type==2">海外直邮</span>
                <span class="item-tips fontZhouQG" v-if="goods.item_cycle_buy_id">周期购</span>
              </div>
              <div class="goods-props" v-if="goods.props">{{goods.props}}</div>
              <div class="price" v-if="detail.pay_type && detail.pay_type==5">&dollar; <em>{{goods.price}}</em>}</div>
              <div class="price" v-else v-html="scaleGoodsPriceFn(goods.price)"></div>
              <!-- 定制sn码 开始 -->
              <div class="sn-ma" v-if="goods.sn_code_list && goods.sn_code_list.length > 0">
                <div>商品SN码：</div>
                <div class="sn-content">
                  <p v-for="(codeItem, codeIndex) in goods.sn_code_list" :key="codeIndex">{{codeItem}}</p>
                </div>
              </div>
              <!-- 定制sn码 结束 -->
            </div>
            <div class="right">
              <span class="num fr"><i>x</i>{{goods.num}}</span>
            </div>
          </section>
        </li>
      </ul>
    </div>    
  </div>
</template>

<script>
import Vue from 'vue'
import { scaleGoodsPrice } from '@/utils/index.js'
import { Tab, Tabs } from 'vant'
Vue.use(Tab)
Vue.use(Tabs)
export default Vue.extend({
  props: {
    /* otherData: {
      type: Object,
      default: () => {
        return {}
      }
    }, */
    detailAll: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  computed: {
    detail() {
      return this.detailAll.detail
    }
  },
  data() {
    return {
      defaultAvatar: 'https://img.wifenxiao.com/h5-wfx/images/default_avatar.jpg'
      // active: 0
    }
  },
  methods: {
    scaleGoodsPriceFn(price) {
      return scaleGoodsPrice(price)
    },
    JumpName(url, data) {
      this.$JumpName(this, url, data)
    },
    goodsLink(goods) {
      // TODO 小程序端订单详情点击图片跳转商品详情，微分销维持不变，下次增加交易快照再次处理

        if (this.detailAll.detail.status == 1 && this.detailAll.groupBuy_num > 1 && this.detailAll.groupBuy_left) {
          // window.location.href = this.detailAll.jsapi_url
          // 拼团商品
          this.JumpName('item-group', { groupId: this.detailAll.detail.group_shopping_id, item_id: goods.item_id })
        } else if (this.detailAll.detail.is_transaction_snapshot == 1) {
          this.JumpName('snapshot', { order_item_id: goods.order_item_id })
        } else {
          this.JumpName('item-detail', { detailId: goods.item_id })
        }
      
    },
    // 分单切换
    clickTab(id, item, index) {
      // console.log(item)
      if (this.detail.gys == 'gys') {
        this.JumpName('order-detail', { id: id, supid: item[0], item: index + 1, identity: 'gys' })
      } else {
        this.JumpName('order-detail', { id: id, supid: item[0], item: index + 1 })
      }
    }
  }
})
</script>

<style lang="scss">
// @import "src/styles/mixin";
@import "src/styles/variables";
@import "src/styles/order/detail";
.order-detail-goods{
  .tabs{
    display:flex;
    justify-content: space-around;
    li{
      position:relative;
      font-size:26px;
      color:#666;
      &.active{
        font-size:28px;
        color:#333;
        &::after{
          content:"";
          width:54px;
          height:4px;
          background:linear-gradient(90deg,rgba(242,11,34,1),rgba(242,11,34,0.2));
          position:absolute;
          left:50%;
          bottom:-12px;
          margin-left:-27px;
        }
      }
    }
  }
  .goods-container{
    .title{
      margin-bottom:30px;
    }
  }
  .order-goods{
    margin-bottom: 30px;
    padding-bottom: 36px;
    border-bottom: 1px solid #ededed;
    &:last-child{
      margin-bottom: 0;
      padding-bottom: 0;
      border-bottom: none;
    }
    .order-goods-infor{
      .item-tips-box{
        margin-top:16px;
        .item-tips{
          // @include alignTop;
          font-size: 20px;
          line-height: 24px;
          padding: 5px 12px;
          background: #ddd;
          margin-right: 10px;
          margin-bottom: 12px;
          border-radius: 24px;
          @include btnGroup($fontDefault, $bgDefault);
          &.fontZhouQG{
            @include btnGroup($fontZhouQG, $bgZhouQG);
          }
          &.fontBaos{
            color:#fff;
            @include gradient(right,#FF2A40,#FE3C70);
          }
        }
      }
      .price{
        display:block;
        position:initial;
        margin-top:16px;
      }
    }
  }
}
// 定制sn码
.sn-ma {
  margin-top: 16px;
  display: flex;
  .sn-content {
    word-break: break-word;
    flex: 1;
  }
}
</style>